<template>
  <div class="Preferably">

    <p>今日优选 <span><img src="../../assets/icon/refresh.png" class="refresh">换一换</span></p>
      <div class="Preferably_b" v-for="(item,index) in preferably" :key="index">
       <div class="left">
         <img :src="item.picUrl" class="today_left" alt="">
       </div>
        <div class="right">
          <p class="text">{{item.name}}</p>
          <p>节目：{{item.programCount}}</p>
          <p>{{item.rcmdText}}</p>
        </div>
      </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'radio',
    data() {
      return {
        todayArray: [],
      };
    },
    computed: {
      ...mapState(['preferably'])
    },
    created() {
      //api 统一管理
      this.$api.getpreferably()
    },
  };
</script>

<style scoped>
  .Preferably{
    width: 100vw;
    height: 440px;

  }
  .Preferably p{

    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-indent: 5px;
    font-weight: bold;
    position: relative;
  }
  .Preferably p span{
    width: 70px;
    display: block;
    position: absolute;
    top: 0;
    right: 5px;
    text-indent: 25px;
    font-size: 12px;
    color: #707172;

  }
  .Preferably_b{
    width: 100vw;
    height: 120px;
  }
  .left{
    width: 30vw;
    height: 120px;
    float: left;
    margin-left: 5px;
  }
  .right{
    width: 67vw;
    height: 120px;
    float: left;
    margin-left: 5px;
    border-bottom: 1px solid #F6F7F8;
  }
  .right .text{
    font-size: 14px;
    font-weight: bold;
    color: #323233;
  }
  .right p{
    height: 30px;
    font-size: 12px;
    color: #828284;
  }
  .refresh{
    display: inline-block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 14px;
    left:8px;
  }
  img{
    width: inherit;
    height: inherit;
    object-fit: contain;
  }
</style>
